<!DOCTYPE html>
<html>
<head>
    <title>Spring-Mass System</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '24px sans-serif';
        ctx.fillStyle = 'black';

        const cx = 225; // Center X of the diagram

        // 1. Draw the fixed surface (ceiling)
        const ceilingY = 80;
        const ceilingStart = cx - 120;
        const ceilingEnd = cx + 120;
        ctx.beginPath();
        ctx.moveTo(ceilingStart, ceilingY);
        ctx.lineTo(ceilingEnd, ceilingY);
        ctx.stroke();

        // Draw hatching for the ceiling
        const hatchLength = 12;
        const hatchSpacing = 20;
        for (let x = ceilingStart + 10; x < ceilingEnd; x += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(x, ceilingY);
            ctx.lineTo(x - hatchLength, ceilingY - hatchLength);
            ctx.stroke();
        }

        // 2. Draw the spring
        const springTopY = 80;
        const springTopConnectorY = 100;
        const numCoils = 11;
        const coilHeight = 18; // Height of one full coil
        const springRadius = 25; // Half of the spring's width
        
        ctx.beginPath();
        // Top connector line
        ctx.moveTo(cx, springTopY);
        ctx.lineTo(cx, springTopConnectorY);

        // Draw the coils using Bezier curves for a smooth look
        let currentY = springTopConnectorY;
        const k = 4 / 3; // Approximation factor for circular arcs with Bezier curves

        for (let i = 0; i < numCoils; i++) {
            const y1 = currentY;
            const y2 = currentY + coilHeight / 2;
            const y3 = currentY + coilHeight;
            // Curve to the left
            ctx.bezierCurveTo(cx - springRadius * k, y1, cx - springRadius * k, y2, cx, y2);
            // Curve to the right
            ctx.bezierCurveTo(cx + springRadius * k, y2, cx + springRadius * k, y3, cx, y3);
            currentY = y3;
        }

        const springBottomY = currentY;
        
        // Bottom connector line
        const massTopY = springBottomY + 10;
        ctx.lineTo(cx, massTopY);
        ctx.stroke();


        // 3. Draw the mass
        const massWidth = 90;
        const massHeight = 60;
        ctx.strokeRect(cx - massWidth / 2, massTopY, massWidth, massHeight);

        // 4. Add labels and leader lines
        ctx.lineWidth = 1; // Thinner lines for leaders

        // "spring" label
        const springLabelX = 80;
        const springLabelY = 200;
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('spring', springLabelX, springLabelY);
        ctx.beginPath();
        ctx.moveTo(springLabelX + 10, springLabelY);
        ctx.lineTo(cx - springRadius, springLabelY);
        ctx.stroke();

        // "mass" label
        const massLabelX = 350;
        const massLabelY = massTopY + massHeight / 2;
        ctx.textAlign = 'left';
        ctx.fillText('mass', massLabelX, massLabelY);
        ctx.beginPath();
        ctx.moveTo(massLabelX - 10, massLabelY);
        ctx.lineTo(cx + massWidth / 2, massLabelY);
        ctx.stroke();

        // "Fig. 4.1" caption
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.font = 'bold 24px sans-serif';
        ctx.fillText('Fig. 4.1', cx, 480);

    </script>
</body>
</html>